<template>
  <div style="height: 420px">
    <FormPanel ref="from" :list="formList" :isSubmitBtn="false" :collapse="false" :labelWidth="100"> </FormPanel>

    <div style="height: 40px"></div>
    <step :stepsList="stepsList" :active="active" @switchForm="switchForm"></step>
    <!-- <el-steps direction="vertical" :active="active" :space="60" >
      <el-step icon="el-icon-star-on" v-for="(item, index) in stepsList" :key="index" :title="item.eventTypeZh">
        <template slot="description">
          <div class="step-description">
            <span>{{ item.eventDate }}</span>
            <span class="location-url" @click="openLocationUrl(item.carrierLocationUrl)">{{ item.eventLocation }}</span>
            <span>{{ item.plateNumber }}</span>
            <span>{{ item.driverName }}</span>
            <span>{{ item.driverPhone }}</span>
          </div>
        </template>
      </el-step>
      <!~~ <el-step title=""></el-step>
      <el-step title="" description="这是一段很长很长很长的描述性文字"></el-step> ~~>
    </el-steps> -->
  </div>
</template>

<script>
import { findLogisticsInfo } from '@/api/omSaleP/OrderManagement/ShipmentOrderQuery/index.js';
import step from './component/step.vue';
export default {
  name: 'logisticsModel',
  props: {
    rowData: {
      type: Object
    }
  },
  components: { step },
  data() {
    return {
      stepsList: [],
      eventType: {
        LOADED: '装车完成',
        DISPATCH: '车辆离场',
        'IN-TRANSIT': '车辆在途',
        ARRIVAL: '车辆达到',
        EXCEPTION: '异常'
      },
      formList: this.createdFrom(),
      tableList: [],
      active: 1
    };
  },
  async mounted() {
    console.log(this.stepsList, this.eventType);
    const res = await findLogisticsInfo(this.rowData);
    if (res.resultCode === 200) {
      this.stepsList = res.data.map(x => {
        if (x.eventType) {
          console.log(x.eventType, this.eventType[x.eventType]);
          // 匹配正文
          x.eventTypeZh = this.eventType[x.eventType];
        }
        if (x.identification) {
          this.active = Number(x.identification);
        }
        return x;
      });
      this.formList.map(x => {
        x.initialValue = this.stepsList[this.active - 1][x.fieldName];
      });
    }
  },
  methods: {
    switchForm(value) {
      this.formList.forEach(x => {
        x.initialValue = value[x.fieldName];
      });
    },
    createdFrom() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '节点信息'
        },
        {
          type: 'INPUT',
          label: '事件类型',
          fieldName: 'eventTypeName',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '事件日期',
          fieldName: 'eventDate',
          disabled: true
        },
        // {
        //   type: 'INPUT',
        //   label: '事件发生地点',
        //   fieldName: 'eventLocation',
        //   disabled: true,
        // },
        {
          type: 'INPUT',
          label: '预计到达日期',
          fieldName: 'eta',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'plateNumber',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '板车车挂号',
          fieldName: 'trailNumber',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '司机姓名',
          fieldName: 'driverName',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '司机电话',
          fieldName: 'driverPhone',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '省份',
          fieldName: 'province',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '城市',
          fieldName: 'city',
          disabled: true
        }
      ];
    }
  }
};
</script>

<style lang="scss">
.step-description {
  display: flex;
  span {
    margin: 0 20px;
  }
  .location-url {
    color: red;
    cursor: pointer;
  }
}
</style>
